import React from 'react'
import './ProducCollection.css'
import { Row, Col, Typography, Divider } from 'antd'
import { ProductImage } from './Proimg'

class ProducCollection extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            a: 1
        }
    }

    render() {
        return (
            <div className='content'>
                 {/* <div class='a' v-if="type == 1"> {{title}}</div>
                 <div class='b' v-if="type == 2"> {{title}}</div>
                 <div class='c' v-if="type == 3"> {{title}}</div> */}
                 {this.props.type == 1 &&  <Divider orientation='left a'>{this.props.title}</Divider>} 
                 {this.props.type == 2 &&  <Divider orientation='left b'>{this.props.title}</Divider>} 
                 {this.props.type == 3 &&  <Divider orientation='left c'>{this.props.title}</Divider>} 
                <Row>
                    <Col span={4}>
                        <img src={this.props.sideImage} className='side-image' />
                    </Col>
                    <Col span={20}>
                        <Row>
                            <Col span={12}>
                                <ProductImage
                                    id={this.props.products[0].id}
                                    size={"large"}
                                    title={this.props.products[0].title}
                                    imageSrc={this.props.products[0].touristRoutePictures[0].url}
                                    price={this.props.products[0].price}
                                />
                            </Col>
                            <Col span={12}>
                                <Row>
                                    <Col span={12}>
                                        <ProductImage
                                            id={this.props.products[1].id}
                                            size="small"
                                            title={this.props.products[1].title}
                                            imageSrc={this.props.products[1].touristRoutePictures[0].url}
                                            price={this.props.products[1].price}
                                        />
                                    </Col>
                                    <Col span={12}>
                                        <ProductImage
                                            id={this.props.products[2].id}
                                            size="small"
                                            title={this.props.products[2].title}
                                            imageSrc={this.props.products[2].touristRoutePictures[0].url}
                                            price={this.props.products[2].price}
                                        />
                                    </Col>
                                </Row>
                                <Row>
                                    <Col span={12}>
                                        <ProductImage
                                            id={this.props.products[3].id}
                                            size="small"
                                            title={this.props.products[3].title}
                                            imageSrc={this.props.products[3].touristRoutePictures[0].url}
                                            price={this.props.products[3].price}
                                        />
                                    </Col>
                                    <Col span={12}>
                                        <ProductImage
                                            id={this.props.products[4].id}
                                            size="small"
                                            title={this.props.products[4].title}
                                            imageSrc={this.props.products[4].touristRoutePictures[0].url}
                                            price={this.props.products[4].price}
                                        />
                                    </Col>
                                </Row>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={6}>
                                <ProductImage
                                    id={this.props.products[5].id}
                                    size="small"
                                    title={this.props.products[5].title}
                                    imageSrc={this.props.products[5].touristRoutePictures[0].url}
                                    price={this.props.products[5].price}
                                />
                            </Col>
                            <Col span={6}>
                                <ProductImage
                                    id={this.props.products[6].id}
                                    size="small"
                                    title={this.props.products[6].title}
                                    imageSrc={this.props.products[6].touristRoutePictures[0].url}
                                    price={this.props.products[6].price}
                                />
                            </Col>
                            <Col span={6}>
                                <ProductImage
                                    id={this.props.products[7].id}
                                    size="small"
                                    title={this.props.products[7].title}
                                    imageSrc={this.props.products[7].touristRoutePictures[0].url}
                                    price={this.props.products[7].price}
                                />
                            </Col>
                            <Col span={6}>
                                <ProductImage
                                    id={this.props.products[8].id}
                                    size="small"
                                    title={this.props.products[8].title}
                                    imageSrc={this.props.products[8].touristRoutePictures[0].url}
                                    price={this.props.products[8].price}
                                />
                            </Col>
                        </Row>
                    </Col>
                </Row>
            </div>
        )
    }
}


export default ProducCollection